<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<div class="dd">
    <h3>计算属性（只读）</h3>
    姓：{{name1}}<br>名：{{name2}}<br>全名：{{myName}}<br>
    <h3>计算属性（可读写）</h3>
    姓：{{name1}}<br>名：{{name2}}<br>全名：{{myName1}}<br>
    <input v-model="myName1">

    <h3>watch属性值监听</h3>
    <input v-model="number" type="number">
</div>

<script>
    var v = new Vue({
        el:".dd",
        data : {
            name1:"张",
            name2:"三",
            number:100
        },
        computed:{
            myName(){
                return this.name1+this.name2;
            },
            myName1 : {
                get(){
                    return this.name1+this.name2;
                },
                set(newValue){
                    this.name1 = newValue.substring(0,1);
                    this.name2 = newValue.substring(1);
                }
            }
        },
        watch : {
            number(newValue,oldValue){
                console.info(newValue,oldValue);
                this.name1 +=newValue;
            }
        }

    });
</script>

</body>
</html>